<template>
    <div class="batch-param">
        <el-tabs class="tabs" v-model="activeName">
            <el-tab-pane label="参数" name="first">
                <el-form
                    class="boxForm"
                    ref="boxForm"
                    :model="boxForm" size="small"
                    label-width="130px"
                    element-loading-background="rgba(0, 0, 0, 0.08)"
                    element-loading-text="数据加载中"
                    element-loading-spinner="el-icon-loading"
                >
                    <div class="single">
                        <el-checkbox
                            v-model="checkList.check1"
                            v-if="!isShow"
                        ></el-checkbox>
                        <el-form-item label="总功率限制值(kw)">
                            <el-input-number style="width:92%"
                                :disabled="!checkList.check1"
                                :step="1"
                                :precision="0"
                                controls-position="right"
                                v-model="boxForm['07010007']"
                                placeholder="请输入总功率限制值"
                                :min="0"
                                :max="65000"
                            ></el-input-number>
                        </el-form-item>
                    </div>

                    <div class="single">
                        <el-checkbox
                            v-model="checkList.check2"
                            v-if="!isShow"
                        ></el-checkbox>
                        <el-form-item label="充电堆类型">
                            <el-select
                                clearable
                                :disabled="!checkList.check2"
                                v-model="boxForm['07010008']"
                                placeholder="请选择充电堆类型"
                            >
                                <el-option
                                    v-for="item in CHARGING_TYPE"
                                    :key="item.code"
                                    :label="item.label"
                                    :value="item.code"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>

                    <el-card class="rules" style="width: 100%" v-if="!isShow">
                        <el-form-item label="个数">
                            <el-input-number
                                :min="1"
                                :max="50"
                                :step="1"
                                step-strictly
                                controls-position="right"
                                placeholder="请输入个数"
                                v-model="operateRule.count"
                            ></el-input-number>
                        </el-form-item>
                        <el-form-item label="间隔(分钟)">
                            <el-input-number
                                :min="1"
                                :max="60"
                                :step="1"
                                step-strictly
                                controls-position="right"
                                placeholder="请输入间隔"
                                v-model="operateRule.interval"
                            >
                            </el-input-number>
                        </el-form-item>
                    </el-card>
                </el-form>
            </el-tab-pane>
        </el-tabs>
        <div class="tip-btn" v-if="!isShow">
            <el-link type="danger">请勾选需要设置的参数</el-link>
            <el-button
                type="primary"
                size="small"
                class="batch_btn"
                @click="isBatchSetting"
                >批量设置</el-button
            >
        </div>
    </div>
</template>

<script>
import { CHARGING_TYPE } from "@/utils/config";

import { handleConfirm } from "@/utils/messageBox";
import { equipment } from "@/api/factuer";
export default {
    props: {
        batchSearchForm: {
            type: Object,
        },
        currentRow: {
            type: Object,
            default: () => {},
        },
        equipTableData: {
            type: Array,
            default: () => [],
        },
        currentParam: {
            type: null,
            default: () => null,
        },
        isShow: {
            //纯展示 不可操作
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            //   参数
            boxForm: {
                "07010007": undefined,
                "07010008": undefined,
            },
            checkList: {
                check1: false,
                check2: false,
            },
     
            activeName: "first",

            operateRule: {
                interval: 1,
                count: 30,
            },

            CHARGING_TYPE: CHARGING_TYPE,
        };
    },
    watch: {
        currentParam: {
            handler(val) {
                if (this.isShow) {
                    this.resetData();
                    if (Array.isArray(val)) {
                        val.forEach((item) => {
                            for (const key in this.boxForm) {
                                if (item.id == key) {
                                    this.boxForm[key] = item.value;
                                }
                            }
                        });
                    }
                }
            },
            deep: true, //对象内部的属性监听，也叫深度监听
            immediate: true,
        },
    },
    created() {},
    methods: {
        isBatchSetting() {
            if (this.equipTableData.length == 0) {
                this.$message.error("暂无符合条件的设备！");
                return;
            }
            let isChecked = {};
            Object.values(this.checkList).map((item, index) => {
                Object.keys(this.boxForm).filter((pp, inx) => {
                    if (item && index == inx) {
                        isChecked[pp] = this.boxForm[pp];
                    }
                });
            });

            if (Object.keys(isChecked).length == 0) {
                this.$message.error("请勾选需要设置的参数！");
                return;
            } else if (
                !Object.values(isChecked).every((item) => item || item == "0")
            ) {
                this.$message.error("请设置已勾选的参数值！");
                return;
            } else if (!this.operateRule.count || !this.operateRule.interval) {
                this.$message.error("请输入个数及间隔！");
                return;
            } else {
                handleConfirm("确定要批量设置参数吗？", "warning", "提示")
                    .then((res) => {
                        this.paramsSetting(isChecked);
                    })
                    .catch((err) => {});
            }
        },
        paramsSetting(isChecked) {
            let datas = [];
            for (const key in isChecked) {
                datas.push({
                    id: key,
                    value: isChecked[key],
                });
            }
            let batchSearchForm = { ...this.batchSearchForm };
            delete batchSearchForm.pageNum;
            delete batchSearchForm.pageSize;
            let params = {
                queryParam: batchSearchForm,
                param: datas,
                operateRule: this.operateRule,
            };
            equipment(
                "/operate/param/batch/insert/async",
                "post",
                params,
                1
            ).then((res) => {
                if (res.code == 200) {
                    this.$message.success(res.message);
                    this.resetData();
                    this.$emit("cancelDialog", 1);
                }
            });
        },
        resetData() {
            for (const key in this.boxForm) {
                this.boxForm[key] = undefined;
            }
            for (const key in this.checkList) {
                this.checkList[key] = false;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
@import "@/styles/common.scss";
.el-card__body {
    @include flexLayout(center, flex-start);
}
</style>
<style scoped lang="scss">
@import "@/styles/common.scss";

.boxForm {
    @include flexLayout(center, flex-start);
    flex-wrap: wrap;
    .single {
        position: relative;
        width: 100%;
        margin-bottom: 5px;
        @include flexLayout(center, space-between);
        .el-form-item {
            margin: 0 0 0 4%;
        }
        .el-checkbox {
            position: absolute;
            left: 0%;
            ::v-deep .el-checkbox__inner {
                border-color: #5473e8;
            }
        }
        .forbidden {
            color: red;
            margin-left: 6px;
        }
        .enable {
            color: #409eff;
            margin-left: 6px;
        }
    }
    .single:last-child {
        margin-bottom: 30px;
    }
}
.el-input {
    width: 200px;
}
.batch-param {
    max-height: 80vh;
    position: relative;
    padding: 0 0 0 10px;
    overflow-y: auto;
    .tip-btn {
        position: absolute;
        top: 0;
        right: 0;
    }
}
.batch_btn {
    margin-left: 10px;
}
::v-deep .el-input.is-disabled .el-input__inner {
    color: #000000;
}
.rules {
    ::v-deep .el-card__body {
        @include flexLayout(center, flex-start);
    }
    .el-form-item {
        width: auto;
        margin-bottom: 0;
    }
}
</style>
